<template>
  <div class="question">
    <QuestionSearchButton
      v-if="$route.fullPath === '/home/question'"
    ></QuestionSearchButton>
    <keep-alive include="QuestionSearch">
      <router-view></router-view>
    </keep-alive>
    <div class="content" v-if="$route.fullPath === '/home/question'">
      <!-- 头部 -->
      <div class="questionTop">
        <div class="left">抖音小游戏视频</div>
        <i class="iconfont icon-vertical_line"></i>
        <div class="right">美食做法</div>
      </div>
      <!-- 历史记录 -->
      <div class="history">
        <div class="historyTitle">
          <div class="text">历史记录</div>
          <i class="iconfont icon-shanchu1"></i>
        </div>
        <div class="historyText">
          <div class="H_left">女生跳舞视频 换装</div>
          <i class="iconfont icon-vertical_line"></i>
          <div class="H_right">女生跳舞视频</div>
        </div>
        <div class="historyText">
          <div class="H_left">asdadasda</div>
          <i class="iconfont icon-vertical_line"></i>
          <div class="H_right">女生跳舞视频</div>
        </div>
        <div class="historyText">
          <div class="H_left">女生跳舞视频 换装</div>
          <i class="iconfont icon-vertical_line"></i>
          <div class="H_right">女生跳舞视频</div>
        </div>
      </div>
      <!-- 猜你想搜索 -->
      <div class="search">
        <div class="searchTitle">猜你想搜</div>
        <div class="searchText">
          <div class="S_left">
            小李好帅
            <i class="iconfont icon-huo"></i>
          </div>
          <i class="iconfont icon-vertical_line"></i>
          <div class="S_right">
            班班好帅
            <i class="iconfont icon-huo"></i>
          </div>
        </div>
        <div class="searchText">
          <div class="S_left">
            小李好帅
            <i class="iconfont icon-huo"></i>
          </div>
          <i class="iconfont icon-vertical_line"></i>
          <div class="S_right">
            班班好帅
            <i class="iconfont icon-huo"></i>
          </div>
        </div>
        <div class="searchText">
          <div class="S_left">
            小李好帅
            <i class="iconfont icon-huo"></i>
          </div>
          <i class="iconfont icon-vertical_line"></i>
          <div class="S_right">
            班班好帅
            <i class="iconfont icon-huo"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  created () {},
  components: {}
}
</script>

<style lang="less" scoped>
.question {
  font-size: 16px;
  .content {
    padding: 0 @p15;
    margin-top: 15px;
    color: #262626;
    // 内容头部
    .questionTop {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f6f6f6;
      padding-bottom: 10px;
      margin-bottom: 20px;
      padding-right: 10px;
      .left {
        flex: 1;
      }
      .right {
        flex: 1;
      }
    }
    // 历史搜索
    .history {
      border-bottom: 1px solid #f6f6f6;
      margin-bottom: 20px;
      .historyTitle {
        color: #9a9999;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .historyText {
        color: #262626;
        display: flex;
        padding-bottom: 20px;
        // margin-bottom: 20px;
        padding-right: 10px;
        .H_left {
          flex: 1;
        }
        .H_right {
          flex: 1;
        }
      }
    }
    // 猜你搜索
    .search {
      .searchTitle {
        color: #9a9999;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .searchText {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        padding-right: 10px;
        .S_left {
          flex: 1;
          display: flex;
          justify-content: space-between;
          // padding-right: 10px;
          .iconfont {
            color: red;
            margin-right: 10px;
          }
        }
        .S_right {
          flex: 1;
          display: flex;
          justify-content: space-between;
          .iconfont {
            color: red;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
